系統功能

測驗的元件介紹完之後，開始介紹測驗的題型。
今天介紹第一組題型「重組」。
重組是指把原來的句子或是文字打亂，需要組回原來的句子或文字。
以本例而言，是把成語的四個字打亂，需要組回原來的成語。
這一組題型其實包含以下幾種情境。
1. 如本例而言，把成語的文字打亂，需要組回原成語。這種題目要小心一種狀況，例如「海角天涯」和「天涯海角」這兩種說法都OK的成語，應該都要能算對。
2. 另一種是英文的句子，以單字打亂。例如 I am a student. 把這四個單字打亂，變成 am a I student. 這種題目要加上中文的解釋「我是一個學生」。不然的話，am I a student 的說法其實也算對。
3. 另一種是英文的單字，以字母打亂。例如 student. 把這七個單字打亂，變成 dentuts. 這種題目要加上中文的解釋「學生」。不然的話，應該很難拼回原來的單字。

技術手法

} else if (questions[index].quizType == "rearrange") {
    let answer_target = '<div class="option">';
    let answer_option = '<div class="answer" "option">';
    const sentence = questions[index].answer;
    // let wordArr = sentence.split(/([,.\s])/);
    let wordArr = sentence.split("");
    let option_tag;
    let finalWordArr = [];
    for (const word of wordArr) {
        if (word !== " " && word !== "") {
            finalWordArr.push(word);
        }
    }
    let i = 0;
    for (const word of finalWordArr) {
        answer_target += '<span class="target';
        answer_target += " target" + String(i) + '"';
        answer_target += ">&nbsp;</span>";
        questions[index].direct_answers[i++] = word;
    }
    ansList = [];
    while (ansList.length < finalWordArr.length) {
        var r = Math.floor(Math.random() * finalWordArr.length);
        if (ansList.indexOf(r) === -1) ansList.push(r);
    }
    console.log(ansList);
    for (i = 0; i < finalWordArr.length; i++) {
        answer_option += '<span class="my_option"';
        answer_option += ' class="select' + i + '" >';
        answer_option += finalWordArr[ansList[i]];
        answer_option += "</span>";
    }
    console.log(answer_option);
    answer_option += "</div>";
    option_list.innerHTML = answer_target;
    select_list.innerHTML = answer_option;
    // correct_list.innerHTML = "";
    console.log(answer_option);
    for (i = 0; i < finalWordArr.length; i++) {
        answer_option += '<span class="my_option">';
        answer_option += finalWordArr[ansList[i]];
        answer_option += "</span>";
    }
    const answer_options = document.querySelectorAll(".my_option");
    let answer_result = true;
    for (let i = 0; i < answer_options.length; i++) {
        answer_options[i].addEventListener("click", function () {
            let tmpClassName = ".target" + String(nowCursorFocus);
            document.querySelector(tmpClassName).innerText = this.innerText;
            nowCursorFocus++;
            if (nowCursorFocus === answer_options.length) {
                for (let j = 0; j < answer_options.length; j++) {
                    if (
                        document.querySelector(".target" + String(j)).innerText !==
                        questions[index].direct_answers[j]
                    ) {
                        answer_result = false;
                    }
                }
                if (answer_result === true) directSelected("correct");
                else directSelected("incorrect");
            }
        });
    }

語文學習17-電影與圖書

1. 你喜歡看那種類型的電影？我喜歡看恐怖片
2. 你喜歡看什麼類型的書？我喜歡看推理小說〖單字〗公司名稱
3. 〖單字〗電影種類
4. 〖單字〗書籍種類